<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios案例</title>
</head>
<body>
<div id="app">
    <table border="1px" width="800px">
        <tr><th>编号</th><th>姓名</th><th>年龄</th><th>电话</th><th>住址</th><th>性别</th></tr>
        <tr v-for="stu in filteredStudents" :key="stu.id">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.cellphone}}</td>
            <td>{{stu.address}}</td>
            <td>{{stu.gender}}</td>
        </tr>
    </table>
    <p>输入需要查询的名字：<input type="text" v-model="searchKeyword" laceholder=""输入学生姓名进行查询> </p>

</div>
<!--导入vue的js文件-->
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            students:[],  //学生集合
            searchKeyword:""
        },
        computed:{
            filteredStudents(){
                return this.students.filter(stu=>{
                    return stu.name.includes(this.searchKeyword);
                });
            }
        },
        methods: {
            loadStudents() {
                // 通过 Axios 发送请求给后台，处理后台返回的响应数据
                axios.get("http://localhost:8080/findstudents")
                    .then(result => {
                        console.log(result.data);
                        if (result.data.code == 200) {
                            this.students = result.data.date; // 假设后台返回的数据在 result.data.date 中
                        }
                    })
                    .catch(error => {
                        console.error("加载学生数据失败:", error);
                    });
            }
        },
        mounted(){
            //调用加载学生方法
            this.loadStudents()
        }
    });
</script>
</body>
</html>